<script lang='ts' setup>
import { ref, defineProps, watch, toRefs } from 'vue'
import { NCheckbox, NSpace } from 'naive-ui'


const props = defineProps<{
    list: string | object
}>()

const { list } = toRefs(props)

type todo = {
    content: string
    status: boolean
}
const todoList = ref<Array<todo>>([])

watch(list, (v) => {
    let todo;
    if (typeof v == 'string') {
        try {
            todo = JSON.parse(v)
        } catch (error) {
        }
    } else {
        todo = v
    }
    const todoListArr: Array<todo> = []
    for (let key in todo) {
        todoListArr.push({
            content: key,
            status: Boolean(todo[key])
        })

    }
    todoList.value = todoListArr.sort((a, b) => Number(b.status) - Number(a.status))
}, {
    immediate: true
})


</script>

<template>
    <div class='my-todo'>
        <n-space vertical>
            <n-checkbox :value="item.content" v-for="(item, index) in todoList" :key="index" :checked="item.status">
                <my-del style="filter: blur(0);" v-if="item.status">{{ item.content }}</my-del>
                <span v-else>{{ item.content }}</span>
            </n-checkbox>
        </n-space>
    </div>
</template>
